*{
    padding: 0px;
    margin: 0px;
}
body{
    height: 600px;
    width: 400px;
    border: 1px solid blue;
    margin: 0 auto;
    text-align: center;
}




.nav{
    height: 16px;
    width: 180px;
    margin: 20px auto;
    background: url(../img/star-matrix.gif) no-repeat;
    background-size:40px 40px;
    /*text-align: center;*/
    position: relative;
}

.onestart{
    background-position: 0px -16px;
}
.twostart{
    background-position: 0px -32px;
}
.threestart{
    background-position: 0px -48px;
}

.fourstart{
    background-position: 0px -64px;
}

.fivestart{
    background-position: 0px -80px;
}



.nav li{
    height: 16px;
    width: 16px;
    list-style: none;
    float: left;
}
.nav li a{
    height: 16px;
    width: 16px;
    position: absolute;
    text-decoration: none;
    display: inline-block;
    text-indent: -99999px;
    z-index: 10;
}
.nav li a:hover{
    left: 0px;
    width: 80px;
    z-index: 7;
    background: url(../img/star-matrix.gif) no-repeat;
    background-size:40px 40px;
    /*background-color: gray;*/
}

.nav .onestart  a:hover{
    background-position: 0px -96px;
}
.nav .twostart  a:hover{
    background-position: 0px -112px;
}
.nav .threestart  a:hover{
    background-position: 0px -128px;
}
.nav .fourstart  a:hover{
    background-position: 0px -144px;
}
.nav .fivestart  a:hover{
    background-position: 0px -160px;
}